
<template>
  <div>
    <van-nav-bar
      title="8天健康养成计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="cultiavtion">
      <div class="cult-img">
        <img src="../../assets/img/养成.png" alt="" />
      </div>

      <van-tabs v-model:active="active" sticky color="#39d167">
        <van-tab title="介绍">
          <div class="cult">
            <div class="cult-box">
              <div class="cult-left"> <span>•</span> 难度系数:</div>
              <div class="cult-right">
                <van-icon name="star" class="star" />
                <van-icon name="star"  class="star"/>
              </div>
            </div>

            <div class="cult-box">
              <div class="cult-left1"> <span>•</span> 适用人群:</div>
              <div class="cult-right1">
                学生党、上班族、久坐族、懒人族以及患有颈肩腰腿痛的人群
              </div>
            </div>

            <div class="cult-box">
              <div class="cult-left"> <span>•</span> 预期效果:</div>
              <div class="cult-right">
                通过专业精准康复视频训练，让你远离身体酸痛，焕发新活力
              </div>
            </div>
            <div class="images">
              <img src="../../../public/healthPlan/8day.png" alt="">
            </div>
          </div>
        </van-tab>
        <van-tab title="目录">
          <div class="day">
          <div class="day1"><b>共8日</b></div>
          <div class="day2">
          <ul @click="handie">
            <li>01日</li>
            <li class="hj">缓解肩颈疲劳酸痛</li>
          </ul>
           <ul @click="handie1">
            <li>02日</li>
            <li class="hj">拯救手腕痛“鼠标手”</li>
          </ul>
           <ul @click="handie2">
            <li>03日</li>
            <li class="hj">缓解腰酸腰痛</li>
          </ul>
           <ul @click="handie3">
            <li>04日</li>
            <li class="hj">改善圆肩驼背</li>
          </ul>
           <ul>
            <li>05日</li>
            <li class="hj">缓解网球肘</li>
          </ul>
           <ul>
            <li>06日</li>
            <li class="hj">缓解下背疼痛</li>
          </ul>
           <ul>
            <li>07日</li>
            <li class="hj">改善膝关节弹响、疼痛</li>
          </ul>
           <ul>
            <li>08日</li>
            <li class="hj">矫正骨盆前倾、后倾</li>
          </ul>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="cult-btn">
      <div class="button"  v-if="flag==false" @click="addji">加入计划</div>
      <div class="but"  v-else>
       <span class="look">查看今天任务</span>
       <span class="cancel" @click="handiefalse">取消计划</span>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>

import { ref } from 'vue'
import { showSuccessToast, showFailToast,showToast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref(0)
const onClickLeft = () => history.back()
const btn=document.querySelector('.button') as HTMLButtonElement;

const flag=ref(false);
const addji=()=>{

  flag.value=true;
  console.log('加入计划');
  localStorage.setItem('flag',JSON.stringify(flag.value));
  // alert('加入成功');
  // showSuccessToast('加入成功');

  showToast({
    message:'加入成功',
    icon:'success',
  })
}
const handiefalse=()=>{
  flag.value=false;
  console.log('取消计划');
  localStorage.setItem('flag',JSON.stringify(flag.value));
  // alert('取消成功');
   showSuccessToast('取消成功');
  //     showToast({
  //     message:'取消成功',
  //   icon:'success',

  // })
}
//缓解肩颈疲劳酸痛
const handie=()=>{
  router.push({
    path:'/handie'
  })
}
//拯救手腕痛“鼠标手”
const handie1=()=>{
  router.push({
    path:'/handie1'
  })
}
//拯救手腕痛“鼠标手”
const handie2=()=>{
  router.push({
    path:'/handie2'
  })
}
const handie3=()=>{
  router.push({
    path:'/handie3'
  })
}
</script>

  <style lang="scss" scoped>
.cultiavtion {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  // background-color: yellow;
  .cult-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .cult {
    .cult-box {
      width: 100%;
      height: 50px;
    }
    .images{
      width: 95%;
      height:1100px;
      margin-top: 25px;
      margin-left: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .cult-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
      span{
        color: #39d167;
      }
    }
    .cult-left1 {
      float: left;

      width: 30%;
      // background-color: blue;
      text-align: center;

      span{
        color: #39d167;
      }
    }
    .cult-right {
      float: left;
      height: 30px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
      .star{
        color: #ffa800;
      }

    }
     .cult-right1 {
      float: left;
      height: 20px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: -10px;


    }
  }
}

.cult-btn {

  // position: absolute;
  width: 100%;
  height:80px;
  // text-align: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  .button {
    width: 100%;
    height: 45px;
    background-color: #39d167;
    text-align: center;
    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;

  }
  .but{
      width: 100%;
    height: 45px;


    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;
  // opacity: 0;
   display: flex;

   .look{
    width: 180px;
    display: inline-block;
     background-color: #39d167;
     text-align: center;
   }
   .cancel{
    width: 180px;
    display: inline-block;
    border: 1px solid #39d167;
    color: #39d167;
    text-align: center;
    margin-left: 10px;

   }
  }
}
.day{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-left: 15px;

  .day1{
    width: 100%;
    height: 30px;
    font-size: 19px;
  }
  .day2{
    width: 100%;
    height: 480px;
    margin-top: 15px;
    overflow-y: scroll;
    ul{
      height: 50px;
      display: flex;
     justify-items: center;
   border-bottom: 1px solid #e5e5e5;

      li{
       color: #a7a7a7;
       margin-top: 10px;
      }
      .hj{
        margin-left: 25px;
      }
    }
  }
}

</style>
